Implementazione di Tooltip: Informazioni Accessibili tramite Hover e Focus

I tooltip sono piccoli messaggi di aiuto contestuali che appaiono quando un utente passa il puntatore del mouse o si focalizza su un elemento. Possono fornire informazioni aggiuntive, chiarire lo scopo di un elemento o offrire suggerimenti su come utilizzare una funzionalità. Tuttavia, i tooltip possono facilmente diventare un incubo per l'accessibilità se non implementati correttamente. Questa guida delinea le migliori pratiche per creare tooltip che siano utilizzabili da tutti, inclusi gli utenti con disabilità.

Perché l'Accessibilità è Importante per i Tooltip

L'accessibilità non riguarda solo la conformità; si tratta di creare un'esperienza utente migliore per tutti. Quando i tooltip non sono accessibili, possono escludere gli utenti che si affidano a tecnologie assistive come screen reader, navigazione da tastiera o input vocale. Consideriamo questi scenari:

• Utenti di screen reader: Se un tooltip non è marcato correttamente, uno screen reader potrebbe non annunciarne la presenza o il contenuto.
• Utenti da tastiera: Se un tooltip appare solo al passaggio del mouse (hover), gli utenti che navigano da tastiera non potranno accedervi.
• Utenti con disabilità motorie: I movimenti precisi del mouse richiesti per le interazioni hover possono essere difficili o impossibili.
• Utenti con disabilità cognitive: Un tooltip mal temporizzato o confuso può creare frustrazione e ostacolare la comprensione.

Seguendo le migliori pratiche di accessibilità, possiamo garantire che i tooltip migliorino anziché ostacolare l'esperienza utente per tutti.

Principi Chiave per Tooltip Accessibili

I seguenti principi sono cruciali per la creazione di tooltip accessibili:

1. Fornire accesso alternativo: Assicurarsi che i tooltip siano accessibili sia tramite hover che tramite focus da tastiera.
2. Usare attributi ARIA: Utilizzare gli attributi ARIA (Accessible Rich Internet Applications) per identificare e descrivere correttamente i tooltip alle tecnologie assistive.
3. Gestire il focus: Controllare dove va il focus quando un tooltip viene visualizzato e nascosto.
4. Garantire un contrasto sufficiente: Fornire un contrasto cromatico adeguato tra il testo del tooltip e lo sfondo.
5. Concedere tempo sufficiente: Dare agli utenti abbastanza tempo per leggere il contenuto del tooltip.
6. Renderli chiudibili: Fornire un modo chiaro per chiudere il tooltip.
7. Evitare l'uso eccessivo: Usare i tooltip con parsimonia e solo quando necessario.

Tecniche di Implementazione

1. Utilizzo di Hover e Focus

L'aspetto più critico dei tooltip accessibili è garantire che siano accessibili sia agli utenti del mouse che a quelli della tastiera. Ciò significa che il tooltip dovrebbe apparire sia al passaggio del mouse (hover) sia quando l'elemento riceve il focus.

HTML:

            <a href="#" aria-describedby="tooltip-example">Example Link</a>
<div id="tooltip-example" role="tooltip" style="display: none;">This is an example tooltip.</div>
            

              
                Copy
              
            
          

CSS:

            a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Assicura che il tooltip sia in primo piano */
}

            

              
                Copy
              
            
          

Spiegazione:

• aria-describedby: Questo attributo collega il link all'elemento del tooltip usando il suo ID. Questo comunica alle tecnologie assistive che il tooltip fornisce informazioni aggiuntive sul link.
• role="tooltip": Questo ruolo ARIA identifica l'elemento come un tooltip.
• Il CSS utilizza il selettore di fratello adiacente (+) per mostrare il tooltip quando si passa sopra o ci si focalizza sul link.

JavaScript (Controllo Avanzato - Opzionale):

Mentre il CSS può gestire semplici operazioni di mostra/nascondi, JavaScript consente un controllo più robusto, specialmente quando i tooltip sono generati dinamicamente o necessitano di un comportamento più complesso.

            const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

2. Utilizzo degli Attributi ARIA

Gli attributi ARIA sono essenziali per fornire informazioni semantiche alle tecnologie assistive. Ecco una panoramica degli attributi chiave:

• aria-describedby: Come menzionato in precedenza, questo attributo stabilisce la relazione tra l'elemento di attivazione e l'elemento del tooltip.
• role="tooltip": Questo attributo definisce esplicitamente l'elemento come un tooltip.
• aria-hidden="true"/aria-hidden="false": Usare questi attributi per indicare se il tooltip è attualmente visibile alle tecnologie assistive. Quando il tooltip è nascosto, impostare aria-hidden="true". Quando è visibile, impostare aria-hidden="false". Questo è particolarmente importante quando si utilizza JavaScript per controllare la visibilità del tooltip.

Esempio:

            <button aria-describedby="help-tooltip">Submit</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Click here to submit the form.</div>
            

              
                Copy
              
            
          

JavaScript (per aria-hidden):

            const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

3. Gestione del Focus

Quando un tooltip appare, generalmente *non dovrebbe* rubare il focus dall'elemento che lo ha attivato. Il focus dovrebbe rimanere sull'elemento che ha attivato il tooltip. Ciò garantisce che gli utenti da tastiera possano continuare a navigare nella pagina senza interruzioni impreviste.

Tuttavia, potrebbero esserci situazioni in cui si *desidera* spostare il focus sul tooltip, in particolare se il tooltip contiene elementi interattivi (ad es. link, pulsanti). In questo caso, assicurarsi che:

• Il tooltip sia visivamente distinto per indicare che ha il focus.
• Ci sia un modo chiaro per restituire il focus all'elemento di attivazione originale (ad es. un pulsante di chiusura all'interno del tooltip).

Nella maggior parte dei casi, è preferibile evitare la gestione del focus all'interno del tooltip stesso per semplicità e usabilità.

4. Garantire un Contrasto Sufficiente

Il contrasto cromatico è cruciale per la leggibilità. Assicurarsi che il colore del testo nei tooltip abbia un contrasto sufficiente rispetto al colore di sfondo. Le Linee Guida per l'Accessibilità dei Contenuti Web (WCAG) raccomandano un rapporto di contrasto di almeno 4.5:1 per il testo normale e 3:1 per il testo grande (18pt o 14pt grassetto).

Utilizzare strumenti online di verifica del contrasto per assicurarsi che le scelte cromatiche soddisfino gli standard di accessibilità. Esempi di verificatori di contrasto includono:

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• Coolors: https://coolors.co/contrast-checker

Esempio (Buon Contrasto):

            .tooltip {
  background-color: #000;
  color: #fff;
}

            

              
                Copy
              
            
          

Esempio (Contrasto Scadente):

            .tooltip {
  background-color: #fff;
  color: #eee;
}

            

              
                Copy
              
            
          

5. Concedere Tempo Sufficiente

Gli utenti necessitano di tempo sufficiente per leggere il contenuto del tooltip. Evitare tooltip che scompaiono troppo rapidamente. Sebbene non esista un numero magico, puntare a un tempo di visualizzazione minimo di alcuni secondi. Inoltre, il tooltip dovrebbe rimanere visibile finché l'utente passa il mouse o si è focalizzato sull'elemento di attivazione. Se è necessario chiudere il tooltip a causa di altri eventi, fornire un indicatore che il tooltip si chiuderà.

Se il contenuto del tooltip è lungo, considerare di fornire un modo per l'utente di chiuderlo manualmente (ad es. un pulsante di chiusura o premendo il tasto Esc).

6. Renderli Chiudibili

Sebbene i tooltip spesso scompaiano automaticamente quando l'utente allontana il mouse o rimuove il focus, è buona norma fornire un modo chiaro per chiuderli manualmente, specialmente per tooltip lunghi o contenenti elementi interattivi.

Metodi per Chiudere i Tooltip:

• Pulsante di chiusura: Includere un pulsante di chiusura visivamente prominente all'interno del tooltip.
• Tasto Esc: Consentire agli utenti di chiudere il tooltip premendo il tasto Esc.
• Clic all'esterno: Chiudere il tooltip quando l'utente clicca in un punto qualsiasi al di fuori del tooltip e dell'elemento di attivazione. (Usare con cautela poiché può essere di disturbo).

Esempio (Pulsante di Chiusura):

            <div id="my-tooltip" role="tooltip" aria-hidden="true">
  This is my tooltip content.
  <button onclick="hideTooltip()">Close</button>
</div>
            

              
                Copy
              
            
          

Esempio (Tasto Esc):

            document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Sostituire con la tua funzione effettiva per nascondere il tooltip
  }
});

            

              
                Copy
              
            
          

7. Evitare l'Uso Eccessivo

I tooltip dovrebbero essere usati con parsimonia e solo quando forniscono informazioni veramente utili. L'uso eccessivo di tooltip può ingombrare l'interfaccia, distrarre gli utenti e creare un'esperienza frustrante.

Alternative ai Tooltip:

• Etichette chiare: Utilizzare etichette chiare e descrittive per campi di moduli, pulsanti e link.
• Aiuto contestuale: Fornire testo di aiuto direttamente nell'interfaccia, vicino agli elementi pertinenti.
• Documentazione di aiuto: Collegare a una documentazione di aiuto completa per le funzionalità più complesse.

Considerazioni Avanzate

Contenuto Dinamico

Se il contenuto del tuo tooltip è generato dinamicamente (ad es. caricato da un'API o aggiornato in base all'input dell'utente), assicurati che l'attributo aria-describedby e la visibilità del tooltip vengano aggiornati di conseguenza. Usa JavaScript per gestire questi aggiornamenti.

Posizionamento

Considerare attentamente il posizionamento dei tooltip. Evitare di posizionarli in modo da oscurare contenuti importanti o causare spostamenti del layout. Tenere conto delle diverse dimensioni e risoluzioni dello schermo e utilizzare il CSS per garantire che i tooltip siano sempre visibili all'interno della viewport.

Dispositivi Mobili

I tooltip si basano tradizionalmente sulle interazioni hover, che non sono disponibili sui dispositivi touch. Per i dispositivi mobili, considerare l'uso di metodi di interazione alternativi, come:

• Tocco (Tap): Visualizzare il tooltip quando l'utente tocca l'elemento.
• Pressione prolungata (Long press): Visualizzare il tooltip quando l'utente preme a lungo l'elemento.
• Mostra su focus: Visualizzare quando l'elemento riceve il focus. Questo può essere ottenuto con JavaScript, verificando il supporto al tocco (ad es. ('ontouchstart' in window)) e modificando di conseguenza il comportamento di visualizzazione.

Testare i Tuoi Tooltip

Testare a fondo i tooltip per assicurarsi che siano accessibili a tutti gli utenti. Utilizzare una combinazione di test manuali e strumenti di test automatici dell'accessibilità.

Metodi di Test:

• Navigazione da tastiera: Verificare che i tooltip siano accessibili usando la tastiera.
• Test con screen reader: Usare uno screen reader per assicurarsi che i tooltip vengano annunciati correttamente.
• Analisi del contrasto cromatico: Usare un verificatore di contrasto cromatico per verificare che il contrasto sia sufficiente.
• Test su dispositivi mobili: Testare i tooltip su diversi dispositivi mobili e dimensioni dello schermo.
• Test di accessibilità automatici: Usare strumenti come axe DevTools, WAVE o Lighthouse per identificare potenziali problemi di accessibilità.

Internazionalizzazione (i18n) e Localizzazione (l10n)

Quando si sviluppano tooltip per un pubblico globale, tenere a mente l'internazionalizzazione e la localizzazione:

• Direzione del testo: Supportare sia la direzione del testo da sinistra a destra (LTR) sia da destra a sinistra (RTL). Usare proprietà logiche CSS (ad es. margin-inline-start, margin-inline-end) invece di proprietà fisiche (ad es. margin-left, margin-right) per il layout.
• Traduzioni specifiche per la lingua: Fornire traduzioni del contenuto del tooltip per le diverse lingue.
• Formati di data e ora: Adattare i formati di data e ora alle impostazioni locali dell'utente.
• Formati numerici: Usare formati numerici appropriati per le diverse regioni (ad es. separatori decimali, separatori delle migliaia).

Conclusione

L'implementazione di tooltip accessibili richiede un'attenta pianificazione e attenzione ai dettagli. Seguendo i principi e le tecniche delineate in questa guida, è possibile creare tooltip utilizzabili da tutti, indipendentemente dalle loro abilità. Ricordare che l'accessibilità è un processo continuo, quindi continuare a testare e perfezionare i tooltip per garantire che soddisfino le esigenze di tutti gli utenti.

Risorse

• Guida alle Pratiche di Authoring ARIA (APG) - Tooltip
• Linee Guida per l'Accessibilità dei Contenuti Web (WCAG) 2.1
• MDN Web Docs - ARIA